

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=auto>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/blog/img/maple_leaf.png">
  <link rel="icon" href="/blog/img/maple_leaf.png">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="author" content="枫🍁川">
  <meta name="keywords" content="">
  
    <meta name="description" content="1. 前端知识体系在说前端面试体系之前，先来看一下之前整理的前端知识体系图（可能不太完整，毕竟我只是一个刚毕业一个多月的小菜鸡），这只是一个基础版的前端知识体系图，适合刚入门前端的小伙伴参考，大佬勿喷：  2. HTML（1）面试题目常考的HTML面试题：  src和href的区别 对HTML语义化的理解 DOCTYPE(⽂档类型) 的作⽤ script标签中defer和async的区别 常⽤的m">
<meta property="og:type" content="article">
<meta property="og:title" content="面试题总结">
<meta property="og:url" content="https://destiny-yyc.github.io/interview-summarize.html">
<meta property="og:site_name" content="枫🍁川的博客">
<meta property="og:description" content="1. 前端知识体系在说前端面试体系之前，先来看一下之前整理的前端知识体系图（可能不太完整，毕竟我只是一个刚毕业一个多月的小菜鸡），这只是一个基础版的前端知识体系图，适合刚入门前端的小伙伴参考，大佬勿喷：  2. HTML（1）面试题目常考的HTML面试题：  src和href的区别 对HTML语义化的理解 DOCTYPE(⽂档类型) 的作⽤ script标签中defer和async的区别 常⽤的m">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e752a753f4a04bae948f410d483d9b83~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp">
<meta property="og:image" content="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/469624491eda40dabdecfe2fbb45a6aa~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp">
<meta property="og:image" content="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/64931630a728403bb0caa99f86f5f662~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp">
<meta property="og:image" content="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b48c47f54a944f21aea3696e6b413d17~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp">
<meta property="og:image" content="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/666ec009cd6c478d82fc11c2a89f31a5~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp">
<meta property="og:image" content="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a72ebc3a1f9f47c7a333976769740e7e~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp">
<meta property="og:image" content="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bc2c03a1285049428ce6769269d948b3~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp">
<meta property="og:image" content="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e3746a6a0a8c4dc3a220ecd3de62f1a0~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp">
<meta property="og:image" content="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ea2f509436de4e32b0a2072ad4dcdf47~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp">
<meta property="og:image" content="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/de74df757b684584b10480cd6f95a4dc~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp">
<meta property="article:published_time" content="2022-06-19T16:00:00.000Z">
<meta property="article:modified_time" content="2023-03-23T09:51:50.727Z">
<meta property="article:author" content="枫🍁川">
<meta property="article:tag" content="面试题总结">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e752a753f4a04bae948f410d483d9b83~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp">
  
  
    <meta name="referrer" content="no-referrer-when-downgrade">
  
  
  <title>面试题总结 - 枫🍁川的博客</title>

  <link  rel="stylesheet" href="https://lib.baomitu.com/twitter-bootstrap/4.6.1/css/bootstrap.min.css" />



  <link  rel="stylesheet" href="https://lib.baomitu.com/github-markdown-css/4.0.0/github-markdown.min.css" />

  <link  rel="stylesheet" href="https://lib.baomitu.com/hint.css/2.7.0/hint.min.css" />

  <link  rel="stylesheet" href="https://lib.baomitu.com/fancybox/3.5.7/jquery.fancybox.min.css" />



<!-- 主题依赖的图标库，不要自行修改 -->
<!-- Do not modify the link that theme dependent icons -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_hj8rtnfg7um.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_lbnruvf0jn.css">


<link  rel="stylesheet" href="/blog/css/main.css" />


  <link id="highlight-css" rel="stylesheet" href="/blog/css/highlight.css" />
  
    <link id="highlight-css-dark" rel="stylesheet" href="/blog/css/highlight-dark.css" />
  




  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    Fluid.ctx = Object.assign({}, Fluid.ctx)
    var CONFIG = {"hostname":"destiny-yyc.github.io","root":"/blog/","version":"1.9.2","typing":{"enable":true,"typeSpeed":70,"cursorChar":"_","loop":false,"scope":[]},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"left","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":false,"trickleSpeed":100}},"code_language":{"enable":true,"default":"TEXT"},"copy_btn":true,"image_caption":{"enable":true},"image_zoom":{"enable":true,"img_url_replace":["",""]},"toc":{"enable":true,"placement":"right","headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":true,"loading_img":"/img/loading.gif","onlypost":false,"offset_factor":2},"web_analytics":{"enable":false,"follow_dnt":true,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":null,"app_key":null,"server_url":null,"path":"window.location.pathname","ignore_local":false}},"search_path":"/blog/local-search.xml"};

    if (CONFIG.web_analytics.follow_dnt) {
      var dntVal = navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack;
      Fluid.ctx.dnt = dntVal && (dntVal.startsWith('1') || dntVal.startsWith('yes') || dntVal.startsWith('on'));
    }
  </script>
  <script  src="/blog/js/utils.js" ></script>
  <script  src="/blog/js/color-schema.js" ></script>
  


  
<meta name="generator" content="Hexo 6.2.0"></head>


<body>
  

  <header>
    

<div class="header-inner" style="height: 70vh;">
  <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand" href="/blog/">
      <strong>枫🍁川的博客</strong>
    </a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/archives/">
                <i class="iconfont icon-archive-fill"></i>
                归档
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/categories/">
                <i class="iconfont icon-category-fill"></i>
                分类
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/tags/">
                <i class="iconfont icon-tags-fill"></i>
                标签
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/about/">
                <i class="iconfont icon-user-fill"></i>
                关于
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" target="_self" href="javascript:;" data-toggle="modal" data-target="#modalSearch" aria-label="Search">
              &nbsp;<i class="iconfont icon-search"></i>&nbsp;
            </a>
          </li>
          
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" target="_self" href="javascript:;" aria-label="Color Toggle">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

  

<div id="banner" class="banner" parallax=true
     style="background: url('/blog/img/default.png') no-repeat center center; background-size: cover;">
  <div class="full-bg-img">
    <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
      <div class="banner-text text-center fade-in-up">
        <div class="h2">
          
            <span id="subtitle" data-typed-text="面试题总结"></span>
          
        </div>

        
          
  <div class="mt-3">
    
      <span class="post-meta mr-2">
        <i class="iconfont icon-author" aria-hidden="true"></i>
        枫🍁川
      </span>
    
    
      <span class="post-meta">
        <i class="iconfont icon-date-fill" aria-hidden="true"></i>
        <time datetime="2022-06-20 00:00" pubdate>
          2022年6月20日
        </time>
      </span>
    
  </div>

  <div class="mt-1">
    
      <span class="post-meta mr-2">
        <i class="iconfont icon-chart"></i>
        
          11k 字
        
      </span>
    

    

    
    
  </div>


        
      </div>

      
    </div>
  </div>
</div>

</div>

  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="side-col d-none d-lg-block col-lg-2">
      

    </div>

    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">面试题总结</h1>
            
            
              <div class="markdown-body">
                
                <h3 id="1-前端知识体系"><a href="#1-前端知识体系" class="headerlink" title="1. 前端知识体系"></a>1. 前端知识体系</h3><p>在说前端面试体系之前，先来看一下之前整理的前端知识体系图（可能不太完整，毕竟我只是一个刚毕业一个多月的小菜鸡），这只是一个基础版的前端知识体系图，适合刚入门前端的小伙伴参考，大佬勿喷： <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e752a753f4a04bae948f410d483d9b83~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp" srcset="/blog/img/loading.gif" lazyload alt="前端.png"></p>
<h3 id="2-HTML"><a href="#2-HTML" class="headerlink" title="2. HTML"></a>2. HTML</h3><h4 id="（1）面试题目"><a href="#（1）面试题目" class="headerlink" title="（1）面试题目"></a>（1）面试题目</h4><p>常考的HTML面试题：</p>
<ol>
<li>src和href的区别</li>
<li>对HTML语义化的理解</li>
<li>DOCTYPE(⽂档类型) 的作⽤</li>
<li>script标签中defer和async的区别</li>
<li>常⽤的meta标签有哪些</li>
<li>HTML5有哪些更新</li>
<li>img的srcset属性的作⽤？</li>
<li>行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？</li>
<li>说一下 web worker</li>
<li>HTML5的离线储存怎么使用，它的工作原理是什么</li>
<li>浏览器是如何对 HTML5 的离线储存资源进行管理和加载？</li>
<li>title与h1的区别、b与strong的区别、i与em的区别？</li>
<li>iframe 有那些优点和缺点？</li>
<li>label 的作用是什么？如何使用？</li>
<li>Canvas和SVG的区别</li>
<li>head 标签有什么作用，其中什么标签必不可少？</li>
<li>文档声明（Doctype）和有何作用? 严格模式与混杂模式如何区分？它们有何意义?</li>
<li>浏览器乱码的原因是什么？如何解决？</li>
<li>渐进增强和优雅降级之间的区别</li>
<li>说一下 HTML5 drag API</li>
</ol>
<h4 id="（2）思维导图"><a href="#（2）思维导图" class="headerlink" title="（2）思维导图"></a>（2）思维导图</h4><p>下图对HTML面试题的考察频率进行了大致的区分，可以选择性的学习： <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/469624491eda40dabdecfe2fbb45a6aa~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp" srcset="/blog/img/loading.gif" lazyload alt="HTML面试题.png"></p>
<h4 id="（3）答案解析"><a href="#（3）答案解析" class="headerlink" title="（3）答案解析"></a>（3）答案解析</h4><p><strong>既然有面试题，那面试题答案也是必不可少的，参考文章：</strong><a target="_blank" rel="noopener" href="https://juejin.cn/post/6905294475539513352"><strong>「2021」高频前端面试题汇总之HTML篇</strong></a></p>
<h3 id="2-CSS"><a href="#2-CSS" class="headerlink" title="2. CSS"></a>2. CSS</h3><h4 id="（1）面试题目-1"><a href="#（1）面试题目-1" class="headerlink" title="（1）面试题目"></a>（1）面试题目</h4><p>常考的CSS面试题：</p>
<p><strong>一、CSS基础</strong></p>
<ol>
<li>CSS选择器及其优先级</li>
<li>CSS中可继承与不可继承属性有哪些</li>
<li>display的属性值及其作用</li>
<li>display的block、inline和inline-block的区别</li>
<li>隐藏元素的方法有哪些</li>
<li>link和@import的区别</li>
<li>transition和animation的区别</li>
<li>display:none与visibility:hidden的区别</li>
<li>伪元素和伪类的区别和作用？</li>
<li>对requestAnimationframe的理解</li>
<li>对盒模型的理解</li>
<li>为什么有时候⽤translate来改变位置⽽不是定位？</li>
<li>li 与 li 之间有看不见的空白间隔是什么原因引起的？如何解决？</li>
<li>CSS3中有哪些新特性</li>
<li>替换元素的概念及计算规则</li>
<li>常见的图片格式及使用场景</li>
<li>对 CSSSprites 的理解</li>
<li>什么是物理像素，逻辑像素和像素密度，为什么在移动端开发时需要用到@3x, @2x这种图片？</li>
<li>margin 和 padding 的使用场景</li>
<li>对line-height 的理解及其赋值方式</li>
<li>CSS 优化和提高性能的方法有哪些？</li>
<li>CSS预处理器&#x2F;后处理器是什么？为什么要使用它们？</li>
<li>::before 和 :after 的双冒号和单冒号有什么区别？</li>
<li>display:inline-block 什么时候会显示间隙？</li>
<li>单行、多行文本溢出隐藏</li>
<li>Sass、Less 是什么？为什么要使用他们？</li>
<li>对媒体查询的理解？</li>
<li>对 CSS 工程化的理解</li>
<li>如何判断元素是否到达可视区域</li>
<li>z-index属性在什么情况下会失效</li>
<li>CSS3中的transform有哪些属性 <strong>二、页面布局</strong></li>
<li>常见的CSS布局单位</li>
<li>px、em、rem的区别及使用场景</li>
<li>两栏布局的实现</li>
<li>三栏布局的实现</li>
<li>水平垂直居中的实现</li>
<li>如何根据设计稿进行移动端适配？</li>
<li>对Flex布局的理解及其使用场景</li>
<li>响应式设计的概念及基本原理</li>
</ol>
<p><strong>三、定位与浮动</strong></p>
<ol>
<li>为什么需要清除浮动？清除浮动的方式</li>
<li>使用 clear 属性清除浮动的原理？</li>
<li>对BFC的理解，如何创建BFC</li>
<li>什么是margin重叠问题？如何解决？</li>
<li>元素的层叠顺序</li>
<li>position的属性有哪些，区别是什么</li>
<li>display、float、position的关系</li>
<li>absolute与fixed共同点与不同点</li>
<li>对 sticky 定位的理解</li>
</ol>
<p><strong>四、场景应用</strong></p>
<ol>
<li>实现一个三角形</li>
<li>实现一个扇形</li>
<li>实现一个宽高自适应的正方形</li>
<li>画一条0.5px的线</li>
<li>设置小于12px的字体</li>
<li>如何解决 1px 问题？</li>
</ol>
<h4 id="（2）思维导图-1"><a href="#（2）思维导图-1" class="headerlink" title="（2）思维导图"></a>（2）思维导图</h4><p>下图对CSS面试题的考察频率进行了大致的区分，可以选择性的学习： <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/64931630a728403bb0caa99f86f5f662~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp" srcset="/blog/img/loading.gif" lazyload alt="CSS面试题.png"></p>
<h4 id="（3）答案解析-1"><a href="#（3）答案解析-1" class="headerlink" title="（3）答案解析"></a>（3）答案解析</h4><p><strong>既然有面试题，那面试题答案也是必不可少的，参考文章：</strong><a target="_blank" rel="noopener" href="https://juejin.cn/post/6905539198107942919">「2021」高频前端面试题汇总之CSS篇</a></p>
<h3 id="3-JavaScript"><a href="#3-JavaScript" class="headerlink" title="3. JavaScript"></a>3. JavaScript</h3><h4 id="（1）面试题目-2"><a href="#（1）面试题目-2" class="headerlink" title="（1）面试题目"></a>（1）面试题目</h4><p><strong>一、数据类型</strong></p>
<ol>
<li>JavaScript有哪些数据类型，它们的区别？</li>
<li>数据类型检测的方式有哪些</li>
<li>判断数组的方式有哪些</li>
<li>null和undefined区别</li>
<li>typeof null 的结果是什么，为什么？</li>
<li>intanceof 操作符的实现原理及实现</li>
<li>为什么0.1+0.2 ! &#x3D;&#x3D; 0.3，如何让其相等</li>
<li>如何获取安全的 undefined 值？</li>
<li>typeof NaN 的结果是什么？</li>
<li>isNaN 和 Number.isNaN 函数的区别？</li>
<li>&#x3D;&#x3D; 操作符的强制类型转换规则？</li>
<li>其他值到字符串的转换规则？</li>
<li>其他值到数字值的转换规则？</li>
<li>其他值到布尔类型的值的转换规则？</li>
<li>|| 和 &amp;&amp; 操作符的返回值？</li>
<li>Object.is() 与比较操作符 “&#x3D;&#x3D;&#x3D;”、“&#x3D;&#x3D;” 的区别？</li>
<li>什么是 JavaScript 中的包装类型？</li>
<li>JavaScript 中如何进行隐式类型转换？</li>
<li>+操作符什么时候用于字符串的拼接？</li>
<li>为什么会有BigInt的提案？</li>
<li>object.assign和扩展运算法是深拷贝还是浅拷贝，两者区别</li>
</ol>
<p><strong>二、ES6</strong></p>
<ol>
<li>let、const、var的区别</li>
<li>const对象的属性可以修改吗</li>
<li>如果new一个箭头函数的会怎么样</li>
<li>箭头函数与普通函数的区别</li>
<li>箭头函数的this指向哪⾥？</li>
<li>扩展运算符的作用及使用场景</li>
<li>Proxy 可以实现什么功能？</li>
<li>对对象与数组的解构的理解</li>
<li>如何提取高度嵌套的对象里的指定属性？</li>
<li>对 rest 参数的理解</li>
<li>ES6中模板语法与字符串处理</li>
</ol>
<p><strong>三、JavaScript基础</strong></p>
<ol>
<li>new操作符的实现原理</li>
<li>map和Object的区别</li>
<li>map和weakMap的区别</li>
<li>JavaScript有哪些内置对象</li>
<li>常用的正则表达式有哪些？</li>
<li>对JSON的理解</li>
<li>JavaScript脚本延迟加载的方式有哪些？</li>
<li>JavaScript 类数组对象的定义？</li>
<li>数组有哪些原生方法？</li>
<li>Unicode、UTF-8、UTF-16、UTF-32的区别？</li>
<li>常见的位运算符有哪些？其计算规则是什么？</li>
<li>为什么函数的 arguments 参数是类数组而不是数组？如何遍历类数组?</li>
<li>什么是 DOM 和 BOM？</li>
<li>对类数组对象的理解，如何转化为数组</li>
<li>escape、encodeURI、encodeURIComponent 的区别</li>
<li>对AJAX的理解，实现一个AJAX请求</li>
<li>JavaScript为什么要进行变量提升，它导致了什么问题？</li>
<li>什么是尾调用，使用尾调用有什么好处？</li>
<li>ES6模块与CommonJS模块有什么异同？</li>
<li>常见的DOM操作有哪些</li>
<li>use strict是什么意思 ? 使用它区别是什么？</li>
<li>如何判断一个对象是否属于某个类？</li>
<li>强类型语言和弱类型语言的区别</li>
<li>解释性语言和编译型语言的区别</li>
<li>for…in和for…of的区别</li>
<li>如何使用for…of遍历对象</li>
<li>ajax、axios、fetch的区别</li>
<li>数组的遍历方法有哪些</li>
<li>forEach和map方法有什么区别</li>
</ol>
<p><strong>四、原型与原型链</strong></p>
<ol>
<li>对原型、原型链的理解</li>
<li>原型修改、重写</li>
<li>原型链指向</li>
<li>原型链的终点是什么？如何打印出原型链的终点？</li>
<li>如何获得对象非原型链上的属性？</li>
</ol>
<p><strong>五、执行上下文&#x2F;作用域链&#x2F;闭包</strong></p>
<ol>
<li>对闭包的理解</li>
<li>对作用域、作用域链的理解</li>
<li>对执行上下文的理解</li>
</ol>
<p><strong>六、this&#x2F;call&#x2F;apply&#x2F;bind</strong></p>
<ol>
<li>对this对象的理解</li>
<li>call() 和 apply() 的区别？</li>
<li>实现call、apply 及 bind 函数</li>
</ol>
<p><strong>七、异步编程</strong></p>
<ol>
<li>异步编程的实现方式？</li>
<li>setTimeout、Promise、Async&#x2F;Await 的区别</li>
<li>对Promise的理解</li>
<li>Promise的基本用法</li>
<li>Promise解决了什么问题</li>
<li>Promise.all和Promise.race的区别的使用场景</li>
<li>对async&#x2F;await 的理解</li>
<li>await 到底在等啥？</li>
<li>async&#x2F;await的优势</li>
<li>async&#x2F;await对比Promise的优势</li>
<li>async&#x2F;await 如何捕获异常</li>
<li>并发与并行的区别？</li>
<li>什么是回调函数？回调函数有什么缺点？如何解决回调地狱问题？</li>
<li>setTimeout、setInterval、requestAnimationFrame 各有什么特点？</li>
</ol>
<p><strong>八、面向对象</strong></p>
<ol>
<li>对象创建的方式有哪些？</li>
<li>对象继承的方式有哪些？</li>
</ol>
<p><strong>九、垃圾回收与内存泄漏</strong></p>
<ol>
<li>浏览器的垃圾回收机制</li>
<li>哪些情况会导致内存泄漏</li>
</ol>
<h4 id="（2）思维导图-2"><a href="#（2）思维导图-2" class="headerlink" title="（2）思维导图"></a>（2）思维导图</h4><p>下图对JavaScript面试题的考察频率进行了大致的区分，可以选择性的学习： <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b48c47f54a944f21aea3696e6b413d17~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp" srcset="/blog/img/loading.gif" lazyload alt="JavaScript面试题.png"></p>
<h4 id="（3）答案解析-2"><a href="#（3）答案解析-2" class="headerlink" title="（3）答案解析"></a>（3）答案解析</h4><p><strong>既然有面试题，那面试题答案也是必不可少的，参考文章：</strong></p>
<ul>
<li><a target="_blank" rel="noopener" href="https://juejin.cn/post/6940945178899251230">「2021」高频前端面试题汇总之JavaScript篇（上）</a></li>
<li><a target="_blank" rel="noopener" href="https://juejin.cn/post/6941194115392634888">「2021」高频前端面试题汇总之JavaScript篇（下）</a></li>
</ul>
<h3 id="4-Vue"><a href="#4-Vue" class="headerlink" title="4. Vue"></a>4. Vue</h3><h4 id="（1）面试题目-3"><a href="#（1）面试题目-3" class="headerlink" title="（1）面试题目"></a>（1）面试题目</h4><p><strong>一、Vue 基础</strong></p>
<ol>
<li>Vue的基本原理</li>
<li>双向数据绑定的原理</li>
<li>使用 Object.defineProperty() 来进行数据劫持有什么缺点？</li>
<li>MVVM、MVC、MVP的区别</li>
<li>Computed 和 Watch 的区别</li>
<li>Computed 和 Methods 的区别</li>
<li>slot是什么？有什么作用？原理是什么？</li>
<li>过滤器的作用，如何实现一个过滤器</li>
<li>如何保存页面的当前的状态</li>
<li>常见的事件修饰符及其作用</li>
<li>v-if、v-show、v-html 的原理</li>
<li>v-if和v-show的区别</li>
<li>v-model 是如何实现的，语法糖实际是什么？</li>
<li>v-model 可以被用在自定义组件上吗？如果可以，如何使用？</li>
<li>data为什么是一个函数而不是对象</li>
<li>对keep-alive的理解，它是如何实现的，具体缓存的是什么？</li>
<li>$nextTick 原理及作用</li>
<li>Vue 中给 data 中的对象属性添加一个新的属性时会发生什么？如何解决？</li>
<li>Vue中封装的数组方法有哪些，其如何实现页面更新</li>
<li>Vue 单页应用与多页应用的区别</li>
<li>Vue template 到 render 的过程</li>
<li>Vue data 中某一个属性的值发生改变后，视图会立即同步执行重新渲染吗？</li>
<li>简述 mixin、extends 的覆盖逻辑</li>
<li>描述下Vue自定义指令</li>
<li>子组件可以直接改变父组件的数据吗？</li>
<li>Vue是如何收集依赖的？</li>
<li>对 React 和 Vue 的理解，它们的异同</li>
<li>Vue的优点</li>
<li>assets和static的区别</li>
<li>delete和Vue.delete删除数组的区别</li>
<li>vue如何监听对象或者数组某个属性的变化</li>
<li>什么是 mixin ？</li>
<li>Vue模版编译原理</li>
<li>对SSR的理解</li>
<li>Vue的性能优化有哪些</li>
<li>对 SPA 单页面的理解，它的优缺点分别是什么？</li>
<li>template和jsx的有什么分别？</li>
<li>vue初始化页面闪动问题</li>
<li>extend 有什么作用</li>
<li>mixin 和 mixins 区别</li>
<li>MVVM的优缺点?</li>
</ol>
<p><strong>二、生命周期</strong></p>
<ol>
<li>说一下Vue的生命周期</li>
<li>Vue 子组件和父组件执行顺序</li>
<li>created和mounted的区别</li>
<li>一般在哪个生命周期请求异步数据</li>
<li>keep-alive 中的生命周期哪些</li>
</ol>
<p><strong>三、组件通信</strong></p>
<ol>
<li>组件通信的方式</li>
</ol>
<p>四、路由</p>
<ol>
<li>Vue-Router 的懒加载如何实现</li>
<li>路由的hash和history模式的区别</li>
<li>如何获取页面的hash变化</li>
<li>route和route 和route和router 的区别</li>
<li>如何定义动态路由？如何获取传过来的动态参数？</li>
<li>Vue-router 路由钩子在生命周期的体现</li>
<li>Vue-router跳转和location.href有什么区别</li>
<li>params和query的区别</li>
<li>Vue-router 导航守卫有哪些</li>
<li>对前端路由的理解</li>
</ol>
<p><strong>五、Vuex</strong></p>
<ol>
<li>Vuex 的原理</li>
<li>Vuex中action和mutation的区别</li>
<li>Vuex 和 localStorage 的区别</li>
<li>Redux 和 Vuex 有什么区别，它们的共同思想</li>
<li>为什么要用 Vuex 或者 Redux</li>
<li>Vuex有哪几种属性？</li>
<li>Vuex和单纯的全局对象有什么区别？</li>
<li>为什么 Vuex 的 mutation 中不能做异步操作？</li>
<li>Vuex的严格模式是什么,有什么作用，如何开启？</li>
<li>如何在组件中批量使用Vuex的getter属性</li>
<li>如何在组件中重复使用Vuex的mutation <strong>六、Vue 3.0</strong></li>
<li>Vue3.0有什么更新</li>
<li>defineProperty和proxy的区别</li>
<li>Vue3.0 为什么要用 proxy？</li>
<li>Vue 3.0 中的 Vue Composition API？</li>
<li>Composition API与React Hook很像，区别是什么</li>
</ol>
<p><strong>七、虚拟DOM</strong></p>
<ol>
<li>对虚拟DOM的理解？</li>
<li>虚拟DOM的解析过程</li>
<li>为什么要用虚拟DOM</li>
<li>虚拟DOM真的比真实DOM性能好吗</li>
<li>DIFF算法的原理</li>
<li>Vue中key的作用</li>
<li>为什么不建议用index作为key?</li>
</ol>
<h4 id="（2）思维导图-3"><a href="#（2）思维导图-3" class="headerlink" title="（2）思维导图"></a>（2）思维导图</h4><p>下图对Vue面试题的考察频率进行了大致的区分，可以选择性的学习： <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/666ec009cd6c478d82fc11c2a89f31a5~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp" srcset="/blog/img/loading.gif" lazyload alt="Vue面试题.png"></p>
<h4 id="（3）答案解析-3"><a href="#（3）答案解析-3" class="headerlink" title="（3）答案解析"></a>（3）答案解析</h4><p><strong>既然有面试题，那面试题答案也是必不可少的，参考文章：</strong></p>
<ul>
<li><a target="_blank" rel="noopener" href="https://juejin.cn/post/6919373017218809864">「2021」高频前端面试题汇总之Vue篇（上）</a></li>
<li><a target="_blank" rel="noopener" href="https://juejin.cn/post/6964779204462247950/">「2021」高频前端面试题汇总之Vue篇（下）</a></li>
</ul>
<h3 id="5-React"><a href="#5-React" class="headerlink" title="5. React"></a>5. React</h3><h4 id="（1）面试题目-4"><a href="#（1）面试题目-4" class="headerlink" title="（1）面试题目"></a>（1）面试题目</h4><p><strong>一、组件基础</strong></p>
<ol>
<li>React 事件机制</li>
<li>React的事件和普通的HTML事件有什么不同？</li>
<li>React 组件中怎么做事件代理？它的原理是什么？</li>
<li>React 高阶组件、Render props、hooks 有什么区别，为什么要不断迭代</li>
<li>React如何获取组件对应的DOM元素？</li>
<li>React中可以在render访问refs吗？为什么？</li>
<li>对React的插槽(Portals)的理解，如何使用，有哪些使用场景</li>
<li>在React中如何避免不必要的render？</li>
<li>对 React-Intl 的理解，它的工作原理？</li>
<li>对 React context 的理解</li>
<li>为什么React并不推荐优先考虑使用Context？</li>
<li>React中什么是受控组件和非控组件？</li>
<li>React中refs的作用是什么？有哪些应用场景？</li>
<li>React组件的构造函数有什么作用？它是必须的吗？</li>
<li>React.forwardRef是什么？它有什么作用？</li>
<li>类组件与函数组件有什么异同？</li>
<li>React中可以在render访问refs吗？为什么？</li>
<li>对React的插槽(Portals)的理解，如何使用，有哪些使用场景</li>
<li>在React中如何避免不必要的render？</li>
<li>对 React-Intl 的理解，它的工作原理？</li>
<li>对 React context 的理解</li>
<li>为什么React并不推荐优先考虑使用Context？</li>
<li>React中什么是受控组件和非控组件？</li>
<li>React中refs的作用是什么？有哪些应用场景？</li>
<li>React组件的构造函数有什么作用？它是必须的吗？</li>
<li>React.forwardRef是什么？它有什么作用？</li>
<li>类组件与函数组件有什么异同？</li>
</ol>
<p><strong>二、数据管理</strong></p>
<ol>
<li>React setState 调用的原理</li>
<li>React setState 调用之后发生了什么？是同步还是异步？</li>
<li>React中的setState批量更新的过程是什么？</li>
<li>React中有使用过getDefaultProps吗？它有什么作用？</li>
<li>React中setState的第二个参数作用是什么？</li>
<li>React中的setState和replaceState的区别是什么？</li>
<li>在React中组件的this.state和setState有什么区别？</li>
<li>state 是怎么注入到组件的，从 reducer 到组件经历了什么样的过程</li>
<li>React组件的state和props有什么区别？</li>
<li>React中的props为什么是只读的？</li>
<li>在React中组件的props改变时更新组件的有哪些方法？</li>
<li>React中怎么检验props？验证props的目的是什么？</li>
</ol>
<p><strong>三、生命周期</strong></p>
<ol>
<li>React的生命周期有哪些？</li>
<li>React 废弃了哪些生命周期？为什么？</li>
<li>React 16.X 中 props 改变后在哪个生命周期中处理</li>
<li>React 性能优化在哪个生命周期？它优化的原理是什么？</li>
<li>state 和 props 触发更新的生命周期分别有什么区别？</li>
<li>React中发起网络请求应该在哪个生命周期中进行？为什么？</li>
<li>React 16中新生命周期有哪些</li>
</ol>
<p><strong>四、组件通信</strong></p>
<ol>
<li>父子组件的通信方式？</li>
<li>跨级组件的通信方式？</li>
<li>非嵌套关系组件的通信方式？</li>
<li>如何解决 props 层级过深的问题</li>
<li>组件通信的方式有哪些</li>
</ol>
<p><strong>五、路由</strong></p>
<ol>
<li>React-Router的实现原理是什么？</li>
<li>如何配置 React-Router 实现路由切换</li>
<li>React-Router怎么设置重定向？</li>
<li>react-router 里的 Link 标签和 a 标签的区别</li>
<li>React-Router如何获取URL的参数和历史对象？</li>
<li>React-Router 4怎样在路由变化时重新渲染同一个组件？</li>
<li>React-Router的路由有几种模式？</li>
<li>React-Router 4的Switch有什么用？</li>
</ol>
<p><strong>六、Redux</strong></p>
<ol>
<li>对 Redux 的理解，主要解决什么问题</li>
<li>Redux 原理及工作流程</li>
<li>Redux 中异步的请求怎么处理</li>
<li>Redux 怎么实现属性传递，介绍下原理</li>
<li>Redux 中间件是什么？接受几个参数？柯里化函数两端的参数具体是什么？</li>
<li>Redux 请求中间件如何处理并发</li>
<li>Redux 状态管理器和变量挂载到 window 中有什么区别</li>
<li>mobox 和 redux 有什么区别？</li>
<li>Redux 和 Vuex 有什么区别，它们的共同思想</li>
<li>Redux 中间件是怎么拿到store 和 action? 然后怎么处理?</li>
<li>Redux中的connect有什么作用</li>
</ol>
<p><strong>七、Hooks</strong></p>
<ol>
<li>对 React Hook 的理解，它的实现原理是什么</li>
<li>为什么 useState 要使用数组而不是对象</li>
<li>React Hooks 解决了哪些问题？</li>
<li>React Hook 的使用限制有哪些？</li>
<li>useEffect 与 useLayoutEffect 的区别</li>
<li>React Hooks在平时开发中需要注意的问题和原因</li>
<li>React Hooks 和生命周期的关系？</li>
</ol>
<p><strong>八、虚拟DOM</strong></p>
<ol>
<li>对虚拟 DOM 的理解？虚拟 DOM 主要做了什么？虚拟 DOM 本身是什么？</li>
<li>React diff 算法的原理是什么？</li>
<li>React key 是干嘛用的 为什么要加？key 主要是解决哪一类问题的</li>
<li>虚拟 DOM 的引入与直接操作原生 DOM 相比，哪一个效率更高，为什么</li>
<li>React 与 Vue 的 diff 算法有何不同？</li>
</ol>
<p><strong>九、其他</strong></p>
<ol>
<li>React组件命名推荐的方式是哪个？</li>
<li>react 最新版本解决了什么问题，增加了哪些东西</li>
<li>react 实现一个全局的 dialog</li>
<li>React 数据持久化有什么实践吗？</li>
<li>对 React 和 Vue 的理解，它们的异同</li>
<li>可以使用TypeScript写React应用吗？怎么操作？</li>
<li>React 设计思路，它的理念是什么？</li>
<li>React中props.children和React.Children的区别</li>
<li>React的状态提升是什么？使用场景有哪些？</li>
<li>React中constructor和getInitialState的区别?</li>
<li>React的严格模式如何使用，有什么用处？</li>
<li>在React中遍历的方法有哪些？</li>
<li>在React中页面重新加载时怎样保留数据？</li>
<li>同时引用这三个库react.js、react-dom.js和babel.js它们都有什么作用？</li>
<li>React必须使用JSX吗？</li>
<li>为什么使用jsx的组件中没有看到使用react却需要引入react？</li>
<li>在React中怎么使用async&#x2F;await？</li>
<li>React.Children.map和js的map有什么区别？</li>
<li>对React SSR的理解</li>
<li>为什么 React 要用 JSX？</li>
<li>HOC相比 mixins 有什么优点？</li>
<li>React 中的高阶组件运用了什么设计模式？</li>
</ol>
<h4 id="（2）思维导图-4"><a href="#（2）思维导图-4" class="headerlink" title="（2）思维导图"></a>（2）思维导图</h4><p>下图对React面试题的考察频率进行了大致的区分，可以选择性的学习： <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a72ebc3a1f9f47c7a333976769740e7e~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp" srcset="/blog/img/loading.gif" lazyload alt="React面试题.png"></p>
<h4 id="（3）答案解析-4"><a href="#（3）答案解析-4" class="headerlink" title="（3）答案解析"></a>（3）答案解析</h4><p><strong>既然有面试题，那面试题答案也是必不可少的，参考文章：</strong></p>
<ul>
<li><a target="_blank" rel="noopener" href="https://juejin.cn/post/6941546135827775525">「2021」高频前端面试题汇总之React篇（上）</a></li>
<li><a target="_blank" rel="noopener" href="https://juejin.cn/post/6940942549305524238">「2021」高频前端面试题汇总之React篇（下）</a></li>
</ul>
<h3 id="6-浏览器原理"><a href="#6-浏览器原理" class="headerlink" title="6. 浏览器原理"></a>6. 浏览器原理</h3><h4 id="（1）面试题目-5"><a href="#（1）面试题目-5" class="headerlink" title="（1）面试题目"></a>（1）面试题目</h4><p><strong>一、浏览器安全</strong></p>
<ol>
<li>什么是 XSS 攻击？</li>
<li>如何防御 XSS 攻击？</li>
<li>什么是 CSRF 攻击？</li>
<li>如何防御 CSRF 攻击？</li>
<li>什么是中间人攻击？如何防范中间人攻击？</li>
<li>有哪些可能引起前端安全的问题?</li>
<li>网络劫持有哪几种，如何防范？</li>
</ol>
<p><strong>二、进程与线程</strong></p>
<ol>
<li>进程与线程的概念</li>
<li>进程和线程的区别</li>
<li>浏览器渲染进程的线程有哪些</li>
<li>进程之前的通信方式</li>
<li>僵尸进程和孤儿进程是什么？</li>
<li>死锁产生的原因？ 如果解决死锁的问题？</li>
<li>如何实现浏览器内多个标签页之间的通信?</li>
<li>对Service Worker的理解</li>
</ol>
<p>三、浏览器缓存</p>
<ol>
<li>对浏览器的缓存机制的理解</li>
<li>浏览器资源缓存的位置有哪些？</li>
<li>协商缓存和强缓存的区别</li>
<li>为什么需要浏览器缓存？</li>
<li>点击刷新按钮或者按 F5、按 Ctrl+F5 （强制刷新）、地址栏回车有什么区别？</li>
</ol>
<p><strong>四、浏览器组成</strong></p>
<ol>
<li>对浏览器的理解</li>
<li>对浏览器内核的理解</li>
<li>常见的浏览器内核比较</li>
<li>常见浏览器所用内核</li>
<li>浏览器的主要组成部分</li>
<li>五、浏览器渲染原理</li>
<li>浏览器的渲染过程</li>
<li>浏览器渲染优化</li>
<li>渲染过程中遇到 JS 文件如何处理？</li>
<li>什么是文档的预解析？</li>
<li>CSS 如何阻塞文档解析？</li>
<li>如何优化关键渲染路径？</li>
<li>什么情况会阻塞渲染？</li>
</ol>
<p><strong>六、浏览器本地存储</strong></p>
<ol>
<li>浏览器本地存储方式及使用场景</li>
<li>Cookie有哪些字段，作用分别是什么</li>
<li>Cookie、LocalStorage、SessionStorage区别</li>
<li>前端储存的⽅式有哪些？</li>
<li>IndexedDB有哪些特点？</li>
</ol>
<p><strong>七、浏览器同源策略</strong></p>
<ol>
<li>什么是同源策略</li>
<li>如何解决跨越问题</li>
<li>正向代理和反向代理的区别</li>
<li>Nginx的概念及其工作原理</li>
</ol>
<p><strong>八、浏览器事件机制</strong></p>
<ol>
<li>事件是什么？事件模型？</li>
<li>如何阻止事件冒泡</li>
<li>对事件委托的理解</li>
<li>事件委托的使用场景</li>
<li>同步和异步的区别</li>
<li>对事件循环的理解</li>
<li>宏任务和微任务分别有哪些</li>
<li>什么是执行栈</li>
<li>Node 中的 Event Loop 和浏览器中的有什么区别？process.nextTick 执行顺序？</li>
<li>事件触发的过程是怎样的</li>
</ol>
<p><strong>九、浏览器垃圾回收机制</strong></p>
<ol>
<li>V8的垃圾回收机制是怎样的</li>
<li>哪些操作会造成内存泄漏？</li>
</ol>
<h4 id="（2）思维导图-5"><a href="#（2）思维导图-5" class="headerlink" title="（2）思维导图"></a>（2）思维导图</h4><p>下图对浏览器原理面试题的考察频率进行了大致的区分，可以选择性的学习： <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bc2c03a1285049428ce6769269d948b3~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp" srcset="/blog/img/loading.gif" lazyload alt="浏览器原理面试题.png"></p>
<h4 id="（3）答案解析-5"><a href="#（3）答案解析-5" class="headerlink" title="（3）答案解析"></a>（3）答案解析</h4><p><strong>既然有面试题，那面试题答案也是必不可少的，参考文章：</strong><a target="_blank" rel="noopener" href="https://juejin.cn/post/6916157109906341902/">「2021」高频前端面试题汇总之浏览器原理篇</a>。</p>
<h3 id="7-计算机网络"><a href="#7-计算机网络" class="headerlink" title="7. 计算机网络"></a>7. 计算机网络</h3><h4 id="（1）面试题目-6"><a href="#（1）面试题目-6" class="headerlink" title="（1）面试题目"></a>（1）面试题目</h4><p><strong>一、HTTP协议</strong></p>
<ol>
<li>GET和POST的请求的区别</li>
<li>POST和PUT请求的区别</li>
<li>常见的HTTP请求头和响应头</li>
<li>HTTP状态码304是多好还是少好</li>
<li>常见的HTTP请求方法</li>
<li>OPTIONS请求方法及使用场景</li>
<li>HTTP 1.0 和 HTTP 1.1 之间有哪些区别？</li>
<li>HTTP 1.1 和 HTTP 2.0 的区别</li>
<li>HTTP和HTTPS协议的区别</li>
<li>GET方法URL长度限制的原因</li>
<li>当在浏览器中输入 Google.com 并且按下回车之后发生了什么？</li>
<li>对keep-alive的理解</li>
<li>页面有多张图片，HTTP是怎样的加载表现？</li>
<li>HTTP2的头部压缩算法是怎样的？</li>
<li>HTTP请求报文的是什么样的？</li>
<li>HTTP响应报文的是什么样的？</li>
<li>HTTP协议的优点和缺点</li>
<li>说一下HTTP 3.0</li>
<li>HTTP协议的性能怎么样</li>
<li>URL有哪些组成部分</li>
<li>与缓存相关的HTTP请求头有哪些</li>
</ol>
<p><strong>二、HTTPS协议</strong></p>
<ol>
<li>什么是HTTPS协议？</li>
<li>TLS&#x2F;SSL的工作原理</li>
<li>数字证书是什么？</li>
<li>HTTPS通信（握手）过程</li>
<li>HTTPS的特点</li>
<li>HTTPS是如何保证安全的？</li>
</ol>
<p><strong>三、HTTP状态码</strong></p>
<ol>
<li>常见的状态码</li>
<li>同样是重定向，307，303，302的区别？</li>
</ol>
<p><strong>四、DNS协议介绍</strong></p>
<ol>
<li>DNS 协议是什么</li>
<li>DNS同时使用TCP和UDP协议？</li>
<li>DNS完整的查询过程</li>
<li>迭代查询与递归查询</li>
<li>DNS 记录和报文</li>
</ol>
<p><strong>五、网络模型</strong></p>
<ol>
<li>OSI七层模型</li>
<li>TCP&#x2F;IP五层协议</li>
</ol>
<p><strong>六、TCP与UDP</strong></p>
<ol>
<li>TCP 和 UDP的概念及特点</li>
<li>TCP和UDP的区别</li>
<li>TCP和UDP的使用场景</li>
<li>UDP协议为什么不可靠？</li>
<li>TCP的重传机制</li>
<li>TCP的拥塞控制机制</li>
<li>TCP的流量控制机制</li>
<li>TCP的可靠传输机制</li>
<li>TCP的三次握手和四次挥手</li>
<li>TCP粘包是怎么回事，如何处理?</li>
<li>为什么udp不会粘包？</li>
</ol>
<p><strong>七、WebSocket</strong></p>
<ol>
<li>对 WebSocket 的理解</li>
<li>即时通讯的实现：短轮询、长轮询、SSE 和 WebSocket 间的区别？</li>
</ol>
<h4 id="（2）思维导图-6"><a href="#（2）思维导图-6" class="headerlink" title="（2）思维导图"></a>（2）思维导图</h4><p>下图对计算机网络面试题的考察频率进行了大致的区分，可以选择性的学习：<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e3746a6a0a8c4dc3a220ecd3de62f1a0~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp" srcset="/blog/img/loading.gif" lazyload alt="计算机网络面试题.png"></p>
<h4 id="（3）答案解析-6"><a href="#（3）答案解析-6" class="headerlink" title="（3）答案解析"></a>（3）答案解析</h4><p><strong>既然有面试题，那面试题答案也是必不可少的，参考文章：</strong><a target="_blank" rel="noopener" href="https://juejin.cn/post/6908327746473033741">「2021」高频前端面试题汇总之计算机网络篇</a>。</p>
<h3 id="8-前端性能优化"><a href="#8-前端性能优化" class="headerlink" title="8. 前端性能优化"></a>8. 前端性能优化</h3><h4 id="（1）面试题目-7"><a href="#（1）面试题目-7" class="headerlink" title="（1）面试题目"></a>（1）面试题目</h4><p><strong>一、CDN</strong></p>
<ol>
<li>CDN的概念</li>
<li>CDN的作用</li>
<li>CDN的原理</li>
<li>CDN的使用场景</li>
</ol>
<p><strong>二、懒加载</strong></p>
<ol>
<li>懒加载的概念</li>
<li>懒加载的特点</li>
<li>懒加载的实现原理</li>
<li>懒加载与预加载的区别</li>
</ol>
<p><strong>三、回流与重绘</strong></p>
<ol>
<li>回流与重绘的概念及触发条件</li>
<li>如何避免回流与重绘？</li>
<li>如何优化动画？</li>
<li>documentFragment 是什么？用它跟直接操作 DOM 的区别是什么？</li>
</ol>
<p><strong>四、节流与防抖</strong></p>
<ol>
<li>对节流与防抖的理解</li>
<li>实现节流函数和防抖函数</li>
</ol>
<p><strong>五、图片优化</strong></p>
<ol>
<li>如何对项目中的图片进行优化？</li>
<li>常见的图片格式及使用场景</li>
</ol>
<p><strong>六、Webpack优化</strong></p>
<ol>
<li>如何提⾼webpack的打包速度?</li>
<li>如何减少 Webpack 打包体积</li>
<li>如何⽤webpack来优化前端性能？</li>
<li>如何提⾼webpack的构建速度？</li>
</ol>
<h4 id="（2）思维导图-7"><a href="#（2）思维导图-7" class="headerlink" title="（2）思维导图"></a>（2）思维导图</h4><p>下图对前端性能优化面试题的考察频率进行了大致的区分，可以选择性的学习： <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ea2f509436de4e32b0a2072ad4dcdf47~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp" srcset="/blog/img/loading.gif" lazyload alt="性能优化面试题.png"></p>
<h4 id="（3）答案解析-7"><a href="#（3）答案解析-7" class="headerlink" title="（3）答案解析"></a>（3）答案解析</h4><p><strong>既然有面试题，那面试题答案也是必不可少的，参考文章：</strong><a target="_blank" rel="noopener" href="https://juejin.cn/post/6941278592215515143">「2021」高频前端面试题汇总之性能优化篇</a>。</p>
<h3 id="9-手写代码"><a href="#9-手写代码" class="headerlink" title="9. 手写代码"></a>9. 手写代码</h3><h4 id="（1）面试题目-8"><a href="#（1）面试题目-8" class="headerlink" title="（1）面试题目"></a>（1）面试题目</h4><p><strong>一、JavaScript 基础</strong></p>
<ol>
<li>手写 Object.create</li>
<li>手写 instanceof 方法</li>
<li>手写 new 操作符</li>
<li>手写 Promise</li>
<li>手写 Promise.then</li>
<li>手写 Promise.all</li>
<li>手写 Promise.race</li>
<li>手写防抖函数</li>
<li>手写节流函数</li>
<li>手写类型判断函数</li>
<li>手写 call 函数</li>
<li>手写 apply 函数</li>
<li>手写 bind 函数</li>
<li>函数柯里化的实现</li>
<li>实现AJAX请求</li>
<li>使用Promise封装AJAX请求</li>
<li>实现浅拷贝</li>
<li>实现深拷贝</li>
</ol>
<p><strong>二、数据处理</strong></p>
<ol>
<li>实现日期格式化函数</li>
<li>交换a,b的值，不能用临时变量</li>
<li>实现数组的乱序输出</li>
<li>实现数组元素求和</li>
<li>实现数组的扁平化</li>
<li>实现数组去重</li>
<li>实现数组的flat方法</li>
<li>实现数组的push方法</li>
<li>实现数组的filter方法</li>
<li>实现数组的map方法</li>
<li>实现字符串的repeat方法</li>
<li>实现字符串翻转</li>
<li>将数字每千分位用逗号隔开</li>
<li>实现非负大整数相加</li>
<li>实现 add(1)(2)(3)</li>
<li>实现类数组转化为数组</li>
<li>使用 reduce 求和</li>
<li>将js对象转化为树形结构</li>
<li>使用ES5和ES6求函数参数的和</li>
<li>解析 URL Params 为对象</li>
</ol>
<p><strong>三、场景应用</strong></p>
<ol>
<li>循环打印红黄绿</li>
<li>实现每隔一秒打印 1,2,3,4</li>
<li>小孩报数问题</li>
<li>用Promise实现图片的异步加载</li>
<li>实现发布-订阅模式</li>
<li>查找文章中出现频率最高的单词</li>
<li>封装异步的fetch，使用async await方式来使用</li>
<li>实现prototype继承</li>
<li>实现双向数据绑定</li>
<li>实现简单路由</li>
<li>实现斐波那契数列</li>
<li>字符串出现的不重复最长长度</li>
<li>使用 setTimeout 实现 setInterval</li>
<li>实现 jsonp</li>
<li>判断对象是否存在循环引用</li>
</ol>
<h4 id="（2）思维导图-8"><a href="#（2）思维导图-8" class="headerlink" title="（2）思维导图"></a>（2）思维导图</h4><p>下图对手写代码面试题的考察频率进行了大致的区分，可以选择性的学习： <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/de74df757b684584b10480cd6f95a4dc~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp" srcset="/blog/img/loading.gif" lazyload alt="手写代码面试题.png"></p>
<h4 id="（3）答案解析-8"><a href="#（3）答案解析-8" class="headerlink" title="（3）答案解析"></a>（3）答案解析</h4><p><strong>既然有面试题，那面试题答案也是必不可少的，参考文章：</strong><a target="_blank" rel="noopener" href="https://juejin.cn/post/6946136940164939813">「2021」高频前端面试题汇总之手写代码篇</a>。</p>
<h3 id="10-代码输出结果"><a href="#10-代码输出结果" class="headerlink" title="10. 代码输出结果"></a>10. 代码输出结果</h3><p><strong>代码输出结果</strong>是面试中常考的题目，一段代码中可能涉及到很多的知识点，这就考察到了应聘者的基础能力。在前端面试中，常考的代码输出问题主要涉及到以下知识点：<strong>异步编程、事件循环、this指向、作用域、变量提升、闭包、原型、继承</strong>等，这里就不一一列举相关的面试题了，已经在另外一篇文章写的很清楚了，参考文章：<a target="_blank" rel="noopener" href="https://juejin.cn/post/6959043611161952269">「2021」高频前端面试题汇总之代码输出结果篇</a>。</p>
<p>如果这一篇文章中的面试题都能搞懂了，那面试中的代码输出结果问题基本都很容易就解决了。</p>
<h3 id="11-前端工程化"><a href="#11-前端工程化" class="headerlink" title="11. 前端工程化"></a>11. 前端工程化</h3><h4 id="（1）面试题目-9"><a href="#（1）面试题目-9" class="headerlink" title="（1）面试题目"></a>（1）面试题目</h4><p><strong>一、Git</strong></p>
<ol>
<li>git 和 svn 的区别</li>
<li>经常使用的 git 命令？</li>
<li>git pull 和 git fetch 的区别</li>
<li>git rebase 和 git merge 的区别</li>
</ol>
<p><strong>二、Webpack</strong></p>
<ol>
<li>webpack与grunt、gulp的不同？</li>
<li>webpack、rollup、parcel优劣？</li>
<li>有哪些常⻅的Loader？</li>
<li>有哪些常⻅的Plugin？</li>
<li>bundle，chunk，module是什么？</li>
<li>Loader和Plugin的不同？</li>
<li>webpack的构建流程?</li>
<li>编写loader或plugin的思路？</li>
<li>webpack的热更新是如何做到的？说明其原理？</li>
<li>如何⽤webpack来优化前端性能？</li>
<li>如何提⾼webpack的打包速度?</li>
<li>如何提⾼webpack的构建速度？</li>
<li>怎么配置单⻚应⽤？怎么配置多⻚应⽤？</li>
</ol>
<p><strong>三、其他</strong></p>
<ol>
<li>Babel的原理是什么?</li>
</ol>
<p><strong>注：</strong> 关于前端工程相关的面试题，由于个人还在整理中，还不是很全面，会尽快发在掘金上，暂时就不给出答案了，大家可以自行查找学习。</p>
<h3 id="12-其他"><a href="#12-其他" class="headerlink" title="12. 其他"></a>12. 其他</h3><p>除了上面给出的这些类别的面试题，其实还有很多，比如数据结构与算法，前端业务实现等。关于数据结构与算法，主要考察方向就是LeetCode题目，可以参考<strong>一个搬砖的胖子</strong>大佬的<a href="https://link.juejin.cn/?target=https://codetop.cc/%23/home">codeTop</a>来针对性的刷题。下面只给出几个业务实现的问题，大家可以参考：</p>
<ol>
<li>如何优化长列表</li>
<li>如何实现一个dialog组件</li>
<li>服务端渲染的原理</li>
<li>项目打包到服务器的整个过程</li>
<li>以前端角度出发做好 SEO 需要考虑什么？</li>
<li>如何实现前端登录</li>
<li>如何实现扫码登录</li>
</ol>
<p><strong>最后，这篇文章只给出了前端面试中经常考察到的“八股文”，基本没有涉及到项目经历相关的问题， 只能根据自己的实际情况去作答了</strong></p>

                
              </div>
            
            <hr/>
            <div>
              <div class="post-metas my-3">
  
    <div class="post-meta mr-3 d-flex align-items-center">
      <i class="iconfont icon-category"></i>
      

<span class="category-chains">
  
  
    
      <span class="category-chain">
        
  <a href="/blog/categories/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/" class="category-chain-item">前端面试题</a>
  
  

      </span>
    
  
</span>

    </div>
  
  
    <div class="post-meta">
      <i class="iconfont icon-tags"></i>
      
        <a href="/blog/tags/%E9%9D%A2%E8%AF%95%E9%A2%98%E6%80%BB%E7%BB%93/">#面试题总结</a>
      
    </div>
  
</div>


              

              
                <div class="post-prevnext my-3">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/blog/interview-vue.html" title="面试题汇总之Vue">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">面试题汇总之Vue</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/blog/promisre-summarize.html" title="Promise 知识点总结">
                        <span class="hidden-mobile">Promise 知识点总结</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
          </article>
        </div>
      </div>
    </div>

    <div class="side-col d-none d-lg-block col-lg-2">
      
  <aside class="sidebar" style="margin-left: -1rem">
    <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div class="toc-body" id="toc-body"></div>
</div>



  </aside>


    </div>
  </div>
</div>





  



  



  



  



  







    

    
      <a id="scroll-top-button" aria-label="TOP" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v" for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>

    

    
  </main>

  <footer>
    <div class="footer-inner">
  
    <div class="footer-content">
       <span>枫🍁川</span> <i class="iconfont icon-love"></i> <span>前端小白</span> 
    </div>
  
  
    <div class="statistics">
  
  

  
    
      <span id="busuanzi_container_site_pv" style="display: none">
        总访问量 
        <span id="busuanzi_value_site_pv"></span>
         次
      </span>
    
    
      <span id="busuanzi_container_site_uv" style="display: none">
        总访客数 
        <span id="busuanzi_value_site_uv"></span>
         人
      </span>
    
    
  
</div>

  
  
  
</div>
<script type="text/javascript" src="/blog/js/click-love.js"></script>

  </footer>

  <!-- Scripts -->
  
  <script  src="https://lib.baomitu.com/nprogress/0.2.0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://lib.baomitu.com/nprogress/0.2.0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js" ></script>
<script  src="https://lib.baomitu.com/twitter-bootstrap/4.6.1/js/bootstrap.min.js" ></script>
<script  src="/blog/js/events.js" ></script>
<script  src="/blog/js/plugins.js" ></script>


  <script  src="https://lib.baomitu.com/typed.js/2.0.12/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var subtitle = document.getElementById('subtitle');
      if (!subtitle || !typing) {
        return;
      }
      var text = subtitle.getAttribute('data-typed-text');
      
        typing(text);
      
    })(window, document);
  </script>




  
    <script  src="/blog/js/img-lazyload.js" ></script>
  




  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/tocbot/4.18.2/tocbot.min.js', function() {
    var toc = jQuery('#toc');
    if (toc.length === 0 || !window.tocbot) { return; }
    var boardCtn = jQuery('#board-ctn');
    var boardTop = boardCtn.offset().top;

    window.tocbot.init({
      tocSelector     : '#toc-body',
      contentSelector : '.markdown-body',
      headingSelector : CONFIG.toc.headingSelector || 'h1,h2,h3,h4,h5,h6',
      linkClass       : 'tocbot-link',
      activeLinkClass : 'tocbot-active-link',
      listClass       : 'tocbot-list',
      isCollapsedClass: 'tocbot-is-collapsed',
      collapsibleClass: 'tocbot-is-collapsible',
      collapseDepth   : CONFIG.toc.collapseDepth || 0,
      scrollSmooth    : true,
      headingsOffset  : -boardTop
    });
    if (toc.find('.toc-list-item').length > 0) {
      toc.css('visibility', 'visible');
    }
  });
</script>


  <script src=https://lib.baomitu.com/clipboard.js/2.0.10/clipboard.min.js></script>

  <script>Fluid.plugins.codeWidget();</script>


  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/anchor-js/4.3.1/anchor.min.js', function() {
    window.anchors.options = {
      placement: CONFIG.anchorjs.placement,
      visible  : CONFIG.anchorjs.visible
    };
    if (CONFIG.anchorjs.icon) {
      window.anchors.options.icon = CONFIG.anchorjs.icon;
    }
    var el = (CONFIG.anchorjs.element || 'h1,h2,h3,h4,h5,h6').split(',');
    var res = [];
    for (var item of el) {
      res.push('.markdown-body > ' + item.trim());
    }
    if (CONFIG.anchorjs.placement === 'left') {
      window.anchors.options.class = 'anchorjs-link-left';
    }
    window.anchors.add(res.join(', '));
  });
</script>


  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/fancybox/3.5.7/jquery.fancybox.min.js', function() {
    Fluid.plugins.fancyBox();
  });
</script>


  <script>Fluid.plugins.imageCaption();</script>

  <script  src="/blog/js/local-search.js" ></script>

  <script defer src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" ></script>





<!-- 主题的启动项，将它保持在最底部 -->
<!-- the boot of the theme, keep it at the bottom -->
<script  src="/blog/js/boot.js" ></script>


  

  <noscript>
    <div class="noscript-warning">博客在允许 JavaScript 运行的环境下浏览效果更佳</div>
  </noscript>
<script src="/blog/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/blog/live2dw/assets/chitose.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body>
</html>
